<template>
	<div class="release_box">
        <div class="head">
            <p class="close" @click="closeMsg"><img src="/static/closeMsg.png" alt=""></p>
            <div class="tab">
                <p @click="tabClick(index,item.state)" :class="{ on: tabIndex == index }" v-for="(item,index) in tab" :key="index">{{item.name}}</p>
            </div>
            <p class="close" @click="close"><u-icon name="close" color="#999999" size="20"></u-icon></p>
        </div>
        
        <div class="list_box">
            <div class="list" v-for="(item,index) in list" :key="index" @click="toUser(item)">
                <img :src="item.avatar?item.avatar:'/static/mr_tx.png'" alt="">
                <div class="msg">
                    <div class="title_box">
                        <p class="title">{{item.chatUserName}}</p>
                        <p class="time">{{item.createTime}}</p>
                    </div>
                    <p class="text">{{item.message}}</p>
                </div>
            </div>
            <div class="no_data" v-if="!list.length">
				<img src="/static/no-data.png" alt="">
				<p>暂无相关私信</p>
			</div>
        </div>
    </div>
</template>
<script>
    import { mapState } from 'vuex'
    import api from '@/api';
    import { getTimeUtils1 } from '@/utils/utils.js'
	export default {
        options: {
            styleIsolation: 'shared'
        },
        props: {
			isRefresh2: {
				type: Number,
				default: 0
			}
		},
        watch:{
            isRefresh2:{
                handler(n,o){
                    if(n){
                        console.log("刷新了");
                        this.getList()
                    }
                }
            }
        },
		data() {
			return {
				value1:'',
                checkboxValue1:[],
                tab:[
                    {name:'收到的私信',state:1},
                    {name:'发出的私信',state:2}
                ],
                tabIndex:0,
                param:{
                    pageNum:0,
					pageSize:10,
                    type:1,
                },
                list:[]
			}
		},
        computed: {
			...mapState({
				userId: state => state.user.userId,
                userName: state => state.user.userName,
			})
		},
		methods: {

            closeMsg(){
                uni.showModal({
                    title: '提示',
                    content: '是否清空消息？',
                    showCancel: true,
                    cancelText: '取消',
                    confirmText: '确定',
                    success:(res)=>{
                        if (res.confirm) {
                            const res = !this.tabIndex?api.user.deletePutChat({id:this.userId}):api.user.deleteSendChat({id:this.userId})
                            res.then((res)=>{
                                if(res.code == 200){
                                    this.getList(true)
                                }else{
                                    this.$toast(res.msg)
                                }
                            })
                        } 
                    },
                });
            },

            toUser(item){
                console.log(item)
                let setData = JSON.stringify({
					memberUserId: this.tabIndex?item.chatUserId:item.memberUserId,
					id:item.newId,
					bAvatar:item.avatar,
					memberUserName:item.memberUserName,
                    chatUserId: item.memberUserId == this.userId ? item.chatUserId : item.memberUserId,
                    chatUserName: item.chatUserName
				})
                const reply = !this.tabIndex ? true : false;
                uni.navigateTo({
                    url: `/pages/chat/index?setData=${setData}&reply=${reply}`
                });
				
            },

            tabClick(index,state){
                this.tabIndex = index
                this.param.type = state
                this.getList()
            },
			
            close(){
                console.log('aaa111')
                this.$emit('close',false)
            },

            getList(){
                this.$showLoading('加载中...')
                this.param.sendUserId = this.userId
                let returnData = !this.tabIndex?api.user.put_chat_list({id:this.userId}):api.user.send_chat_list({id:this.userId})
                returnData.then(res=>{
                    if(res.code == 200){
                        uni.hideLoading();
                        res.data.map(item=>{
                            item.createTime = getTimeUtils1(item.createTime)
                        })
                        this.list = res.data
                    }else{
                        uni.hideLoading();
                    }
                })
            }
		},
        mounted(){
        },
        onLoad() {
		},
		onShow(){
            console.log('222')
        }
	}
</script>

<style lang="scss" scoped>
    @mixin content-flex($pitch) {
		display: flex;
		align-items: center;
		justify-content:  $pitch;
	}
	.release_box{
        border-radius: 20rpx 20rpx 0px 0px;
        .head{
            height: 92rpx;
            padding:0 30rpx;
            border-radius: 20rpx 20rpx 0px 0px;
            @include content-flex(space-between);
            .close{
                img{
                    width: 32rpx;
                    height: 28rpx;
                }
            }
            .tab{
                display: flex;
                background: #EEEEEE;
                border-radius: 8rpx;
                p{
                    @include content-flex('');
                    height: 56rpx;
                    padding:0 46rpx;
                    color:#999999;
                    font-size: 26rpx;
                    font-weight: 500;
                    border-radius: 8rpx;
                    &.on{
                        background: #23AC39;
                        color:#fff;
                    }
                }
            }
        }
        .list_box{
            margin:36rpx 32rpx;
            height: 50vh;
            .list{
                display: flex;
                padding-bottom:34rpx;
                img{
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                }
                .msg{
                    width: 84%;
                    margin-left:20rpx;
                    display: flex;
                    flex-direction:column;
                    justify-content: space-between;
                    padding-bottom:34rpx;
                    border-bottom:1px solid #EEEEEE;
                    .title_box{
                        @include content-flex(space-between);
                        font-size: 28rpx;
                        color:#666;
                        .time{
                            color:#999;
                            font-size:24rpx;
                        }
                    }
                    .text{
                        width: 100%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        font-size:30rpx;
                        color:#333;
                    }
                }
            }
            .no_data{
				text-align: center;
				margin-top:100rpx;
				img{
					width: 320rpx;
					height: 320rpx;
				}
				p{
					font-size: 24rpx;
					color: #999999;
					margin-top:-40rpx;
				}
			}
        }
    }
</style>
